<template>
    <div class="topDiv">
        <v-toolbar>
<!--            <v-app-bar-nav-icon></v-app-bar-nav-icon>-->
            <v-toolbar-title>场景信息列表</v-toolbar-title>
            <v-row style="margin-top: 20px">
                <v-col cols="2"></v-col>
                <v-col cols="4">
                    <v-btn
                        small
                        class="option-btn"
                        color="#00c4ff"
                        @click="newScene"
                    >新增测试场景</v-btn>
                    <v-dialog
                        v-model="dialogScene"
                        max-width="1000px"
                    >
                        <v-card height="640px">
                            <v-card-title>
                                <h4>编辑生成测试场景所需的因子以及因子取值等相关信息：</h4>
                                <v-spacer></v-spacer>
                                <v-btn icon color="primary" @click="dialogScene=false">
                                    <v-icon>mdi-close</v-icon>
                                </v-btn>
                            </v-card-title>
                            <v-card-text>
                                <v-StepEdit v-if="dialogScene" :updateSheet="sheets" @updateList="getSceneList"></v-StepEdit>
                            </v-card-text>
                        </v-card>
                    </v-dialog>
                    <v-dialog
                        v-model="dialogView"
                        max-width="1000px"
                    >
                      <v-ViewTable :node="node_info"></v-ViewTable>
                    </v-dialog>
                </v-col>
                <v-col cols="2">
                    <v-text-field
                        label="Search"
                        append-icon="mdi-magnify"
                    ></v-text-field>
                </v-col>
                <v-col cols="4"></v-col>
            </v-row>
            <v-spacer></v-spacer>
        </v-toolbar>
        <v-divider></v-divider>

        <v-expansion-panels>
            <v-expansion-panel
              v-for="item in Items"
              :key="item"
              @click="query_data(item.name)"
            >
              <v-expansion-panel-header>
                <v-row no-gutters>
                  <v-col
                    cols="6"
                    class="text--secondary"
                  >
                    <v-fade-transition leave-absolute>
                      <span>
                        测试场景名称：{{ item.name }}
                      </span>
                    </v-fade-transition>
                  </v-col>
                  <v-col cols="3"></v-col>
                  <v-col
                    cols="3"
                    class="text--secondary"
                  >
                    <v-fade-transition leave-absolute>
                      <span>
                        状态: {{ item.status === 0 ? "未生成":"已生成" }}
                      </span>
                    </v-fade-transition>
                  </v-col>
                </v-row>
              </v-expansion-panel-header>
              <v-expansion-panel-content>
                <v-row no-gutters>
                  <v-col cols="12">
                    <v-ShowDetail v-if="show" :SheetData="sheets"></v-ShowDetail>
                  </v-col>
                </v-row>
                <v-card-actions>
                  <div class="option-info">
                    <v-btn
                      text
                      color="primary"
                      @click="modifyScene(true)"
                    >
                      复制新增
                    </v-btn>
                    <v-btn
                      text
                      color="primary"
                      @click="modifyScene(false)"
                    >
                      修改
                    </v-btn>
                    <v-btn
                      text
                      color="error"
                      @click="deleteScene(item)"
                    >
                      删除
                    </v-btn>
                  </div>

                  <div class="option-action">
                    <v-text-field
                        v-model="pict_order"
                        label="PICT阶数："
                    ></v-text-field>
                  </div>
                  <v-btn
                    text
                    color="primary"
                    @click="run_pict(item)"
                  >
                    场景生成
                  </v-btn>
                  <v-btn
                    text
                    color="primary"
                    @click="view_data(item)"
                  >
                    查看场景
                  </v-btn>
                </v-card-actions>
              </v-expansion-panel-content>
            </v-expansion-panel>
        </v-expansion-panels>

        <div style="width: 800px">
<!--            <v-StepEdit></v-StepEdit>-->
        </div>
    </div>
</template>

<script>
import {defineComponent} from '@vue/composition-api'
import Step from './children/Step'
import Detail from './children/ShowDetail'
import ViewTable from './children/ViewResult.vue'

export default defineComponent({
    setup() {

    },
    components: {
        'v-StepEdit': Step,
        'v-ShowDetail': Detail,
        'v-ViewTable': ViewTable
    },
    data(){
        return {
            node: this.$route.params.name,
            dialogScene: false,
            dialogView: false,
            pict_order: 0,
            show: false,
            date: null,
            trip: {
                name: '',
                location: null,
                start: null,
                end: null,
            },
            // 场景列表：[{'id': 1, 'name': 'test001'}, {'id': 1, 'name': 'test002'}, {'id': 1, 'name': 'test003'}]
            Items: [],
            sheets: {
              'scene_name': '',
            },
            node_info: {}
      }
    },
    mounted() {
        this.getSceneList()
    },
    methods: {
        getSceneList(){
            console.log('getSceneList ...')
            let get_data = {'node': this.node}
            this.$api.scene.getSceneList(get_data).then(res=>{
                console.log(res)
                this.Items = res.data.data
            })
        },
        newScene(){
          this.sheets.scene_node = this.node
          this.dialogScene = true
        },
        modifyScene(flag){
          if(flag===true){
            this.sheets.scene_name = ''
          }
          this.sheets.scene_node = this.node
          this.dialogScene = true
        },
        deleteScene(node){
          let tip = "确认删除 " + node.name
          let flag = confirm(tip)
          if(flag) {
            let get_post = {'id': node.id}
            this.$api.scene.deleteScene(get_post).then(res=>{
              if(res.data.success===1){
                this.getSceneList()
              }
            })
          }

        },
        query_data(name){
          this.show = false
          console.log('query_data ...')
          let get_data = {'name': name}
          this.$api.scene.getSceneData(get_data).then(res=>{
              this.sheets = JSON.parse(res.data.data)
              console.log(this.sheets)
              this.pict_order = this.sheets.scene_order
              this.show = true
          })
        },
        run_pict(node) {
          let get_post = {'id': node.id}
          this.$api.scene.runPict(get_post).then(res=>{
            if(res.data.success!==1){
              alert(res.data.message)
            }else {
              this.getSceneList()
            }
          })
        },
        view_data(node){
          if(node.status===0){
            alert('测试场景尚未生成！')
          }else {
            this.dialogView = true
            this.node_info = node
          }
        }
    }
})
</script>

<style scoped>
.topDiv {
  margin-left: 1%;
  margin-top: 1%;
}
.option-btn {
  margin-left: 20px;
  /*color: #00c4ff;*/
}
.option-info {
  display: inline;
  width: 30%;
}
.option-action {
  display: inline;
  margin-left: 30%;
  width: 160px;
  margin-top: 15px;
}
</style>